<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>直播课堂</title>
	<link rel="stylesheet" href="./dist/css/chartroom.css"/>
</head>
<body>
	<div class="m-head">
		<div class="g-doc">
			<div class="logo item">直播课堂</div>
			<div class="nav item" style="display:none;">
				<a href="../index.html">DEMO首页</a>
			</div>
			<div class="nav item">
				<a href="./list.html">直播课堂首页</a>
			</div>
			<div class="info item">
				<img src="./images/default-icon.png" alt="头像" id="avatar">
				<!-- <a href="./roomManage.html" id="nickName">匿名</a> -->
				<span id="nickName">匿名</span>
				<a href="./login.html" id="chatroom-login">登录</a>
				<a id="chatroom-logout">注销</a>
			</div>
			<div class="action item" style="display: none;"><a href="./anchor.html"><b class="icon"></b>我要当主播</a></div>
		</div>
	</div>
	<div class="g-doc">
		<div class="m-list" id="roomlist">
            
        </div>
        <p id="more" style="display: none;">正在加载···</p>
	</div>
	<div id="fun" class="fun"></div>
	<script src="../../3rd/jquery-1.11.3.min.js"></script>
	<script src="../js/config.js"></script>
	<script src="./src/js/config.js"></script>
	<script src="./src/js/util.js"></script>
	<script src="./src/js/title.js"></script>
	<script src="../../3rd/jquery-1.11.3.min.js"></script>
	<script>
		$(document).ready(function() {
			
            var userInfo = JSON.parse( localStorage.getItem('userInfo') ).data;
            var token = userInfo.token;
            if(!token){
                location.href = "login.html";
            }
            var schoolCode = userInfo.schoolCode || userInfo.childList[0].school_code;
            var pageNum = 1,oldPageNum;
            var queryData = {
                TOKEN: token,
                schoolCode:schoolCode,
                page: pageNum,
                rows:"13"
            }
            queryList(queryData);
            function queryList(data) {
                $.ajax({
                    url: liveListInterface,
                    //contentType:"application/json",
                    type: 'post',
                    datatype: 'json',
                    data: data,

                    /*beforeSend: function (req) {
                        console.log(req)
                        req.setRequestHeader('appkey', CONFIG.appkey);
                    }*/
                    success:function(req){
                        
                        var data = JSON.parse(req);
                        if(data.code==0){
                            var list = data.data,
                                item,
                                total,
                                html ="";
                            localStorage.setItem("desc",data.desc);
                            if(list.length > 0){
                                pageNum += 1;
                            }else{
                                
                                return "";
                            }
                            for (var i = 0; i < list.length; i++) {//list.length
                                item = list[i];
                                /* if(item.onlineusercount > 10000){
                                    var value = new Number(item.onlineusercount/10000);
                                    total = value.toFixed(1)+"万";
                                }else{
                                    total = item.onlineusercount;
                                }
                                if(!total){
                                    total = 0;
                                } */
                                //hlspullurl,rtmppullurl
                                html += ['<div class="item j-item" data-liveUrl="'+ item.hlspullurl + ',' + item.rtmppullurl +'" data-id="'+item.roomid+'">',
                                            '<div class="snapshot">',
                                                '<img class="pic" src="'+ imgIp + item.icon +'"/>',
                                                '<div class="play">',
                                                    '<img class="btn" src="images/play.png">',
                                                '</div>',
                                            '</div>',
                                            '<div class="title">',
                                                '<a href="">'+item.name+'</a>',
                                            '</div>',
                                            
                                            //'<div class="online">在线人数：<span>'+total+'人</span></div>',
                                            '<div class="status">'+  item.status +'</div>',
                                        '</div>'].join("");
                                /* html += ['<div class="item j-item" data-liveUrl="">',
                                    '<div class="snapshot">',
                                        '<img class="pic" src=""/>',
                                        '<div class="play">',
                                            '<img class="btn" src="images/play.png">',
                                        '</div>',
                                    '</div>',
                                    '<div class="title">',
                                        '<a href=""></a>',
                                    '</div>',
                                    
                                    //'<div class="online">在线人数：<span>'+total+'人</span></div>',
                                    '<div class="status"></div>',
                                '</div>'].join(""); */
                            }
                            $("#roomlist").append(html);
                            //$('#more').before(html);
                            funScrol('','','',function () {

                                if(pageNum > 1 && oldPageNum != pageNum){
                                    queryData.page = pageNum;
                                    oldPageNum = pageNum
                                    queryData.rows = 10;
                                    queryList(queryData);
                                }
                                
                            })
                            var $items = $("#roomlist .j-item");
                            $items.on("click",function(evt){
                                var id = evt.currentTarget.getAttribute("data-id");
                                var liveUrl = evt.currentTarget.getAttribute("data-liveUrl");
                                sessionStorage.setItem("liveUrl",liveUrl);
                                var index  = $(this).index();
                                sessionStorage.setItem('roomData',JSON.stringify(list[index]));
                                //sessionStorage.setItem('rtmp',)
                                window.open("./room.html?id="+id);
                            });	
                            var type = util.readCookie("kickReason");
                            if(type){
                                util.delCookie("kickReason");
                                alert(type);				
                            }
                        }else{
                            localStorage.setItem("desc",data.desc);
                            alert("获取聊天室列表失败");
                            location.href = "login.html";
                        }
                    }
                }).done(function(data) {
                    
                });
            }
			
            var offNo = true,//滚动开关
            toff = false;//调试
            function isScroll(el) {//判断当前是否有滚动条
                // 判断的目标
               
                // ret
                return {
                    scrollY: document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)//判断是否有滚动条
                };
            }
            function funScrol(x,datas,pos,fun){
                    if(!x){
                        x = 10//底部fixed导航的高度;$(xxx).height();
                    }
                    if(isScroll().scrollY){//判断是否存在垂直滚动条
                        
                        
                        $(document).scroll(function () {//滚动开始

                            var t = $('body').scrollTop(),
                                th = $(this).height();
                           // console.log(th,$(this).scrollTop(),$(window).height())
                            if(th-$(this).scrollTop()-$(window).height() < 20){//刚滚动至底部距离20PX时
                                if(offNo){//判断滚动开关是否开启
                                    //offNo=false;//关闭滚动开关
                                    if(fun){//函数
                                            fun();
                                        }
                                }
                            }
                        })
                    }else{//没有滚动条就隐藏
                        $('#more').hide();
                    }
            }
             
		})
	</script>
</body>
</html>